<template>
  <div>
    <!-- 头部区域 -->
    <van-nav-bar title="黑马优购" fixed />
    <div class="appand">
      <!-- 轮播图区域 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image.image_src" class="kuan" @click="showImage(image.goods_id)" />
        </van-swipe-item>
      </van-swipe>

      <!-- 商品分类列表区域 -->
      <van-grid :column-num="4" icon-size="70px">
        <van-grid-item
          v-for="(item,index) in classIcon"
          :key="index"
          :icon="item"
          @click="handel(index)"
        />
      </van-grid>
      <!-- 商品图片区域 -->
      <div v-for="(item,index) in shopImageList" :key="index">
        <van-row>
          <van-col span="24">
            <img :src="item.floor_title.image_src" alt />
          </van-col>
        </van-row>
        <div>
          <van-row>
            <van-col :span="8">
              <img @click.stop="handelId(item.product_list[0].name)" :src="item.product_list[0].image_src" alt />
            </van-col>
            <van-col :span="8">
              <van-row>
                <van-col :span="24">
                  <img @click.stop="handelId(item.product_list[1].name)" :src="item.product_list[1].image_src" alt />
                </van-col>
                <van-col :span="24">
                  <img @click.stop="handelId(item.product_list[2].name)" :src="item.product_list[2].image_src" alt />
                </van-col>
              </van-row>
            </van-col>
            <van-col :span="8">
              <van-row>
                <van-col :span="24">
                  <img @click.stop="handelId(item.product_list[3].name)" :src="item.product_list[3].image_src" alt />
                </van-col>
                <van-col :span="24">
                  <img @click.stop="handelId(item.product_list[4].name)" :src="item.product_list[4].image_src" alt />
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Vue from "vue";
import { ImagePreview } from "vant";
Vue.use(ImagePreview);
import { format } from "url";
export default {
  data() {
    return {
      // 轮播图图片数据
      images: [],
      classIcon: [],
      shopImageList: [],
      show: false
    };
  },
  created() {
    this.getImagesList();
    this.$store.commit("setIfShow", true);
  },
  methods: {
    async getImagesList() {
      const { data: res } = await this.$http.get("/home/swiperdata");
      if (res.meta.status !== 200) {
        return this.$message.error("获取轮播图数据失败");
      }
      this.images = res.message;
      const { data: rest } = await this.$http.get("/home/catitems");
      if (rest.meta.status !== 200) {
        return this.$message.error("获取分类数据失败");
      }
      rest.message.forEach(item => {
        this.classIcon.push(item.image_src);
      });
      // 获取首页商品图片数据
      const { data: ret } = await this.$http.get("/home/floordata");
      if (ret.meta.status !== 200) {
        return this.$message.error("获取首页楼层数据失败");
      }
      this.shopImageList = ret.message;
    },
    handel(index) {
      if (index === 0) {
        this.$router.push("/actions");
      }
    },
    handelId(name) {
      this.$router.push({path:'/goods',query:{cateName:name}})
    },
    showImage(id) {
      this.$store.commit("getgoodid", id);
      this.$router.push("/details");
    }
  },
  computed: {
    ...mapGetters(["getAllNum"])
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #d81e06;
}
.kuan {
  width: 100% !important;
}
img {
  width: 100%;
}
.van-swipe-item {
  margin-top: 46px;
}
.icn {
  width: 20px !important;
  height: 20px !important;
}
.van-swipe {
  height: 200px;
}
.appand {
  margin-bottom: 50px;
}
</style>
